<div>
  <el-table :data="rolesData" style="width: 100%">
    <!-- 第一列，有下拉列表 -->
    <el-table-column width="80" type="expand">
      <template slot-scope="scope1">
        <el-row
          v-for="(value,key) in scope1.row.children"
          :key="scope1.row.children.id"
          class="xuxian"
        >
          <!-- 整个下拉框的左边 -->
          <el-col :span="4">
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item>
                <el-tag size="small" closable>{{ value.authName }}</el-tag>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 整个下拉框的右边 -->
          <el-col :span="20">
            <el-row v-for="(value,key) in value.children" :key="value.id">
              <!-- 下拉框右半部分为两份 -->
              <el-col :span="5">
                <el-form label-position="left" class="demo-table-expand">
                  <el-form-item>
                    <el-tag size="small" type="success" closable>{{
                      value.authName
                    }}</el-tag>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="19">
                <el-form label-position="left" class="demo-table-expand" inline>
                  <el-form-item
                    v-for="(value,key) in value.children"
                    :key="value.id"
                  >
                    <el-tag size="small" type="warning" closable>{{
                      value.authName
                    }}</el-tag>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <!-- 第二列，索引列 -->
    <el-table-column
      type="index"
      :index="startWith0"
      label="#"
      width="80"
    ></el-table-column>
    <!-- 角色名称列 -->
    <el-table-column
      prop="roleName"
      label="角色名称"
      width="180"
    ></el-table-column>
    <!-- 角色描述 -->
    <el-table-column prop="roleDesc" label="描述" width="180"></el-table-column>
    <!-- 操作列 -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- 编辑按钮 -->
        <el-button
          type="primary"
          icon="el-icon-edit"
          plain
          size="mini"
        ></el-button>
        <!-- 删除按钮 -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          plain
          size="mini"
        ></el-button>
        <!-- 分配权限按钮 -->
        <el-button
          type="success"
          icon="el-icon-check"
          plain
          size="mini"
          @click="ruleRights(scope.row)"
          >分配权限</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 点击分配权限的弹窗 -->
  <el-dialog title="分配权限" :visible.sync="dialogRightsVisible" width="40%">
    <el-tree
      :data="ruleRightsData"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
    >
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogRightsVisible = false">取 消</el-button>
      <el-button type="primary" @click="rightsChange">确 定</el-button>
    </div>
  </el-dialog>
</div>
